<template>
    <div class="box" >
        <t-layout >
            <t-aside width="315px" >
                <t-menu theme="light" value="dashboard" style="margin-right: 50px;border: 1px solid #e8e8e8; border-radius: 10px 0 0 10px;" :width="315" height="550px">
                    <div class="top">
                        <h3>接口管理</h3>
                    </div>
                    <div class="search">
                         <n-input placeholder="请输入内容">
                            <template #prefix>
                            <n-icon size="20">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                <path d="M443.5,420.2L336.7,312.4c20.9-26.2,33.5-59.4,33.5-95.5c0-84.5-68.5-153-153.1-153S64,132.5,64,217s68.5,153,153.1,153c36.6,0,70.1-12.8,96.5-34.2l106.1,107.1c3.2,3.4,7.6,5.1,11.9,5.1c4.1,0,8.2-1.5,11.3-4.5C449.5,437.2,449.7,426.8,443.5,420.2z M217.1,337.1c-32.1,0-62.3-12.5-85-35.2c-22.7-22.7-35.2-52.9-35.2-84.9c0-32.1,12.5-62.3,35.2-84.9c22.7-22.7,52.9-35.2,85-35.2c32.1,0,62.3,12.5,85,35.2c22.7,22.7,35.2,52.9,35.2,84.9c0,32.1-12.5,62.3-35.2,84.9C279.4,324.6,249.2,337.1,217.1,337.1z"></path>
                                </svg>
                            </n-icon>
                            </template>
                        </n-input>
                    </div>                
                    <t-submenu value="1-1" title="默认模块">                        
                    <t-menu-item value="1-1-1"> 
                        <template #icon>
                            <t-icon name="dashboard" />
                        </template>
                        三级菜单内容 
                    </t-menu-item>
                    <t-menu-item value="1-1-1"> 
                        <template #icon>
                            <t-icon name="server" />
                        </template>
                        三级菜单内容 
                    </t-menu-item>
                    <t-menu-item value="1-1-1"> 
                        <template #icon>
                            <t-icon name="control-platform" />
                        </template>
                        三级菜单内容 
                    </t-menu-item>
                    </t-submenu>
                    <!-- 快捷请求 -->
                    <t-submenu value="1-2" title="快捷请求">                        
                    <t-menu-item value="1-2-1"> 
                        <template #icon>
                            <t-icon name="dashboard" />
                        </template>
                        三级菜单内容 
                    </t-menu-item>
                    <t-menu-item value="1-2-1"> 
                        <template #icon>
                            <t-icon name="server" />
                        </template>
                        三级菜单内容 
                    </t-menu-item>
                    <t-menu-item value="1-2-1"> 
                        <template #icon>
                            <t-icon name="control-platform" />
                        </template>
                        三级菜单内容 
                    </t-menu-item>
                    </t-submenu>
                    
                </t-menu>
            </t-aside>
            <t-layout>
                <t-content>
                        <t-tabs  v-model="value" theme="card" :addable="true" :dragSort="true" @add="addTab" @remove="removeTab">
                        <t-tab-panel
                            :destroyOnHide="false"
                            v-for="data in panelData"
                            :key="data.value"
                            :value="data.value"
                            :label="data.label"
                            :removable="data.removable"
                        >
                            <p style="padding: 25px">
                                   <Content/>
                            </p>
                        </t-tab-panel>
                        </t-tabs>
                    <!-- <Content></Content> -->
                </t-content>
            </t-layout>
        </t-layout>
    </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import Content from '../component/Content.vue';

    let id = 0;
    const value = ref('first');
    const panelData = ref([
    {
        value: 'first',
        label: '选项卡1',
        removable: true,
        content: '123',
    }
    ]);

    

    const addTab = () => {
        panelData.value.push({
            value: `${id+2}`,
            label: `选项卡${id+2}`,
            removable: true,
            content: '新选项卡内容',
        });
        value.value = `${id+2}`;
        id += 1;
    };

    const removeTab = ({ value: val, index }: { value: string; index: number }) => {
        if (index < 0) return false;
        panelData.value.splice(index, 1);
        if (panelData.value.length === 0) return;
        if (value.value === val) {
            value.value = panelData.value[Math.max(index - 1, 0)].value;
        }
    };
    
</script>

<style scoped>
    .box {
        background-color: pink;
        /* width: 100vw; */
        height: 100vh;
        display: flex;
        margin: 0;
        padding: 0;
        
    }
    .header {
        display: flex;
        align-items: center;
        background-color: #fff;
        border-top: 1px solid #e8e8e8;
    }
    :deep(.t-tabs__operations--right .t-tabs__btn:first-child) {
        box-shadow: none;
        
    }
    
    


</style>